Copyright: © 1997 Ulead Systems, Inc.


Subsampling explained

Note: This is a simplified description of subsampling to help you better understand how it works for JPEG images.

Digital images consist of patterns of dots called pixels. For JPEG images, each pixel has three characteristics (entries) to define its color. The H value describes its brightness and the Cb and Cy values describe the two color components. It is the brightness of each pixel that our eyes are most sensitive to. So it is the most critical component to be reproduced in the image. This is where subsampling helps enhance compression. Applying subsampling to an image tells the compressor to retain all the brightness information but to average some of the less important color information.

Think of your image as groups of pixels arranged into blocks. Each square block contains four pixels. Without subsampling, each block requires twelve entries to describe it, (three for each pixel). If we subsample using the 4-1-1 method, each pixel keeps its own brightness (H) value, but the color values (Cb and Cy) are each summed and then averaged. Each pixel in the block then uses this value, so the number of required entries for the block drops to six, (four brightness values and two color values.) The 4-2-2 subsampling method is a compromise between None and 4-1-1 and consists of eight entries, (four brightness, two for the first color channel, and two for the second color channel). For example, this square with no subsampling might be represented as:

with 4-2-2 subsampling, it might be:

with 4-1-1 subsampling, it might be:


How does subsampling affect grayscale images?

Changing the subsampling settings for grayscale images has no effect on the final outcome. This is because subsampling only affects the color values in the image, which do not exist for pixels in grayscale images.


Changing the subsampling settings for grayscale images has no effect on the final outcome. This is because subsampling only affects the color values in the image, which do not exist for pixels in grayscale images.


Optimizing grayscale images as JPEG files

1.	Load the image you wish to optimize in Ulead SmartSaver.

2.	Select the compression mode for the file.

3.	Set the desired Compression/Quality or click Batch to automatically generate a series of tests.

4.	When you obtain the image you want to keep, click Save.


Automating your image optimization

Ulead SmartSaver cannot automatically find the best image type and size for your purposes. It can help to find the best one without requiring you to manually change a lot of settings. Here's how:

1.	Load the image you wish to optimize in Ulead SmartSaver.

2.	For JPEG images, set the mode, subsampling, and smoothing options for the image.

For GIF images, in the GIF Options tab, check or clear interlaced and set the transparency options for the image. In the Mask Options tab, set the smoothing option and from the Palette drop-down list, select Optimized.

For PNG images, set the PNG Options (which vary by file type) and select Optimized from the Palette drop down list.

3.	Click Batch.

4.	In the Batch dialog box type the lowest and highest acceptable quality (JPEG) or number of colors (GIF or PNG) and the number of tries you want  to attempt.

5.	Click OK and wait for Ulead SmartSaver to complete each try. This may take a while depending on the number of tries you set and the complexity of the image.

6.	When Ulead SmartSaver finishes, a list will be created of all of the images within the parameters you selected, and a preview of the selected image will be shown above in the image frame.

7.	When the image you want to keep appears in the image frame, click Select.


Viewing images in Ulead SmartSaver

You have several options for controlling what appears in the image frames. When you change the view in one frame, the other frame changes also:

Click  [image]  to zoom in on the image.

Click  [image]  to zoom out on the image.

Click  [image]  to restore the image to its actual size. (The entire image might be too big to fit in the frame.)

Click  [image]  to resize the image to the largest size that fits inside the frame.

Click  [image]  to center the image in the frame.

Click  [image]  to expand the Compressed frame to fill the upper half of the dialog box. This is good for viewing wide images. (Click again to restore the Uncompressed frame.)

Click  and drag an image that is too big for the frame to focus on a different area.

Click  [image]  to see a full screen view of the image at its actual size. Press any key to return to the dialog box.

Click  [image]  to resize the image.

Click  [image]  to crop the image and remove extraneous portions from around it.

Click  [image]  to change the file format of the compressed (resultant) image.


Using the history list

Adding a setting to the history List

To add a test to the history list, click  [image]  and choose Add to History

Navigating the history list

  Displays the next larger image in the history list according to file size.

  Displays the next smaller image in the History List according to file size.

  and select History to open the History list. Select the test you want to view  and click Select to make these settings the active settings in the SmartSaver dialog box.

Removing all settings from the history list

To empty the History List, click  [image]  and choose Clear History.


Understanding and using color with GIF or PNG images

Using color can be very tricky in the context of creating images and documents for the web. Many factors influence how the image appears and there are some appearance issues that you simply cannot control. Here are some color issues to consider when working with GIF or PNG images.

Monitors are different Each monitor has its own way of showing colors. Most high-end monitors are pretty consistent, but those on the lower end of the price range may not show exactly the same colors you see on your screen. This is an important thing to remember, especially when working with backgrounds, colored text, and areas where contrast is important. The PNG file format, however, provides gamma correction, which can compensate for these differences.

Indexed Color modes If your visitor's monitor uses an indexed-color display mode, (typically 256-color), there is already a limit to the number of different colors that can be shown. Further, it is the palette for the program on your visitor's computer that determines which colors are possible. If your images contain colors that do not exist on your visitor's palette, the web browser approximates it by either finding the closest color in the available palette or dithering the image. This often makes images that look perfect on your system, but total disasters when viewed on others.

Palettes in High or True color Using an optimized palette to show images in hi- or true-color displays is usually the best choice. This is because the system itself is able to reproduce more colors than are in the image's palette.

Multiple palettes Even if your visitor has a High-color or True color display mode, there may be a limit to how many Indexed Colors it can display at one time. Some systems can only show one 256-color palette at a time. This means that if two or more images appear on the same page of an HTML document, they should both use the same palette. This can cause "blinking", or even worse, distortion. (One exception to this rule is if your images are using reduced palettes. In this case, the total number of colors for all the palettes used in the HTML document should be less than or equal to 256.).


Reducing the size of your color palette

Reducing the number of colors in the color palette offers two advantages to reducing file size. First, since the palette is smaller, less space is required inside the image file to store all the Indexed Color values. But the real space saving is due to fewer different colors in the image which makes it easier to compress.

1.	Open Ulead SmartSaver.

2.	Set the transparent features in the Mask Options tab.

3.	In the GIF Options or PNG Options tab, select or clear Interlaced. Interlaced files are slightly larger, but display progressively as they download.

3.	From  the Palette drop down list, select Optimized.

In the Colors text box, type the desired number of colors.

In the Dither drop-down list, select the desired dithering.


Creating transparent images from a selection area or channel
  Selection	  Mask	  Color

1.	Create a selection of the area you want to be transparent in your image and then open the Ulead SmartSaver.

2.	In the GIF or PNG Options tab, select the Palette optimization level, number of Colors, and Dithering.

3.	Click the Mask Options tab.

4.	If you selected the area in the image you want to remain visible before loading into Ulead SmartSaver, select Invert transparent area.

5.	Click Save.

Note  In Adobe Photoshop, you can use this same procedure to specify a channel in your image to mark the transparent area. Instead of selecting Import Mask, select the channel you wish to make transparent from the drop down list.


Creating transparent images using an image mask
  Selection	  Mask	  Color

You can use a second image to isolate the visible and transparent areas for your optimized image. If you use a grayscale image, the grays create a feathered or partially transparent area depending on how close the gray is to black or white. In addition to using standard image files (1 to 32 bit) to create masks, you can also import the alpha channel from TIF or TGA or other image file formats that support this feature.

1.	Load the image you wish to optimize in the Ulead SmartSaver.

2.	Set the Color and Palette settings on GIF or PNG Options tab.

  Click the Mask Options tab.

Select Import Mask from the Transparent area list and open a mask.

4.	To switch the transparent and visible areas, check the "Invert transparent area" option.

5.	Adjust the mask and enable Blending if you desire.

6.	Click Save and save your mask to an image file. You can now use this image as a transparent mask on other images.


Creating transparent images by color
Creating transparent images by color (GIF and PNG)
  Selection	  Mask	  Color

1.	Load the image you wish to optimize in the Ulead SmartSaver.

2.	Select Pick colors from the Transparent Area drop-down list.

3.	Press Ctrl and click a color in the Uncompressed image frame to make it transparent. Press the Alt. key and click the color you would like to appear transparent.

Note: To prevent delays due to updating the optimized frame, hold the Ctrl, Alt, or Ctrl and Alt keys down until you finish selecting. Also, you can scroll your image in the frame to a different area by pressing Ctrl and Alt as you drag the image to a different area.

4.	If the selection marks the area you wish to be transparent, check "Invert transparent area".

5.	Click Save.

An alternate to selecting a single color (or group of colors) across the entire image is to select the Adjacent color only option. This allows you to select the colors in a specific region of the image by using a color similarity based on the pixel you clicked in the preview pane. The number in the Similarity spin box represents the color value of that pixel + or - the number entered. This lets you select all the colors within that color value range within the area you choose.


Which file type is best?
  GIF	  JPEG	  PNG

GIF and JPEG images both have their places on the web, and PNG now provides you with a third alternative. The key is choosing which one will best address your needs in a particular circumstance. Here are some guidelines:

Use GIF when:

you only need a few colors in the image. If your image contains fewer that 64 colors, a GIF will probably be smaller than a JPEG. For best results, make sure you reduce the palette size also.

the image contains text or sharp edges. To make sure text in images remains readable, you should use the GIF format. JPEG is a lossy compression method and could cause text and edges to become blurry and less distinct.

creating buttons. Button dimensions are usually very small, so they probably contain only a few colors. This usually makes a GIF file with an optimized and reduced palette the best choice.

it is a hand-drawn image. You are probably not using more than 256 colors; and there may even be fewer than 128 in the image. Try saving as a GIF and seeing the results before opting for JPEG.

creating simple swashes Most swashes are only a few pixels high and need only a few colors. This makes them good candidates for GIF's.


JPEG_choice
Which file type is best?
  GIF	  JPEG	  PNG

Use JPEG when:

saving a photograph. JPEG images can contain over 32 million different colors. That is much more than the human eye can see. Although the compression is lossy, by varying the quality settings, you can minimize file size while retaining acceptable quality.

including headline-style text. If you want to incorporate large text into a photographic image, JPEG may be a good format to use. While the edges may still get blurred, the danger of it becoming unreadable is slim. If you think your image is more important than the text, go ahead and use the JPEG format.

saving images for backgrounds. Unless your background is a simple swash or small tile, JPEG images are usually better suited for backgrounds. This is because of the low contrast and similarity of colors required for a good background.  You don't want to use a custom palette for your background images because of color palette conflicts that could arise when other indexed-color images appear on the same page. And often, the standard palette simply does not offer a sufficient number of similar low-contrast shades to construct a good background image.


PNG choice
Which file type is best?
  GIF	  JPEG	  PNG

Use PNG when:

256 colors aren't enough. PNG images can theoretically contain over 280 trillion different colors, while retaining many of the characteristics of a GIF, like transparency and interlacing.

you need gamma correction. If the absolute brightness of an image is vital, PNG is the only way to go.

 	you need to edit your images. If you are posting images for others to download and edit, neither the GIF or JPEG format should be used. GIF limits your ability to make all the changes you want because of its limited color palette. JPEG's lossy compression scheme makes further editing risky. The best alternative is to put a GIF or JPEG image on your web page, (according to the above guidelines), and link it to another image saved in a true-color, lossless format, like PNG or TIFF


Swashes are colored strips that run horizontally across a web page. Sometimes they serve to break up areas in the document. They can also be used to create backgrounds.

Noise is the random appearance of colored spots in an image. For example, a poorly reproduced fax, with lots of stray marks might be considered noisy. Or, watching TV when the broadcast signal is poor might result in a noisy image.


Editing JPEG images

It is possible to edit and re-save JPEG images. but there are a few precautions you should follow.

Remember that JPEG is a lossy compression scheme. You will never get back to quite where you were before you re-saved.

For best results, save an edited JPEG image using its previous quality setting. In general, the areas you have not changed will remain the same. The parts of the image that contain new data will be affected the most.

Avoid resizing the image. This will cause serious problems as the initial reference points for the compressor will change.


Probably your best choice is TIFF with LZW compression.


The number of possible colors is calculated as an exponent of 2. 8 bit color means you have 256 colors available: 2^8=256 (2 to the 8th). PNG supports a 48 bit color scheme which means 2 to the 48th power (2^48), or 280 trillion.


Optimizing images with Ulead SmartSaver

Optimizing images with SmartSaver can be accomplished in one of two easy ways:

As a stand alone:

1.	Double click the SmartSaver icon (or run from the program menu).

2.	Select the file or files you want to optimize.

3.	Click the Start button.

As a plug in:

1.	Open or create the image you want to optimize in your image editing program.

2.	From the menu containing your plug-in modules, choose "Export".

3.	From the resulting submenu, choose the file format you wish to optimize.

4.	In the SmartSaver dialog box, set the optimization options to obtain the desired file size and appearance.

5.	Click Save and assign the optimized image a name and destination.


What is color reduction?

Color reduction is the process of reducing the total number of colors contained in the images color palette. Fewer colors can significantly change how the image looks. Colors that are removed from the palette can be simulated by dithering. For many images, using fewer colors can greatly enhance the ability to compress the image further.


Transparency and shadows

Be careful when adding shadows to an image that has a transparent background. This is because shadows often rely on background color data to produce the shadow effect. If the background of your web page is significantly different from that of your image, the area where the shadow appears may not blend in smoothly on your web page.


To feather an image is to soften its edges so that the image blends in better with the background. This is particularly useful when creating shadows.


Related reading

If you would like to obtain more information about the world wide web and creating images for it, try these resources:

On the Web

The Ulead Systems home page at
http://www.ulead.com

The Bandwidth Conservation Society at
http://www/infohiway/faster/index.html

The 216 colors of Netscape at
http://www.connect.hawaii.com/hc/webmasters/Netscape.colors.html

JPEG FAQ at
http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/top.html

PNG  at
http://www.wco.com/~png

The Webmaster's Notebook at
http://www.cio.com/WebMaster/wm_notebook.html

At your local bookstore

WORLD WIDE WEB DESIGN GUIDE by Stephen Wilson

The Web Page Design Cookbook by William Horton, Lee Taylor, Arthur Ignacio, and Nancy L. Hoft.


Create your images with high contrast; that way, even if the colors do not appear exactly the same, the differences between colors will remain more apparent.

View your images on another monitor or system to see how they differ before adding them to your web pages.


Use the palette your visitors use. Ulead GIF SmartSaver has commands for specifying the two most popular browser palettes currently available. As long as you use colors from these palettes, all your images will appear the same on all systems. The downside to using these palettes is that they may not offer the most accurate colors for reproducing your unique images. This is particularly true for images with gradients or dominant shades.


It is safer to only use one palette or a group of palettes that add up to 256 or fewer colors for Indexed Color images on a single page.


Create a backup using a lossless True color format such as TIFF, PNG or BMP before creating the GIF.


Dithering simulates colors or shades of colors that do not exist in the current palette by creating patterns from those colors that are in the palette.


Glossary

Click below for definitions of terms used in this help.

feather

dithered

interlaced

noise

smoothing filter

progressive

subsampling

swashes


Increase the smoothing when subsampling alone does not produce adequate results and reducing quality makes the image look significantly worse.


It is recommended that you not save images with text as JPEG's. If you do, make sure the subsampling setting is None.


As a rule, flat images with little detail or texture are best suited for such aggressive compression.


Smoothing improves compression by making adjacent pixels more similar to each other. This is particularly important for Indexed Color images that are to be saved to the JPEG format (which is not recommended). These types of images use dithering to simulate colors that do not exist in the limited palette. However JPEG compression does not recognize dithering this way. It just sees individual pixels that are colored differently. Thus it tries to reproduce the image as closely as possible. The resulting images often looks far worse than the original Indexed Color image, even at high quality settings.

Smoothing often results in making your images appear a little hazy or out of focus. Depending on the image, a little blurring may not be too obvious when the image is viewed on the web. Strong blurring is probably best for images where detail is not a major concern.


A method of storing image data so that when the image is opened it appears out of focus and slowly comes into focus as more and more of the GIF or PNG image is downloaded (as opposed to the user seeing nothing until the entire image is downloaded). This is a preferred method for presenting images over networks and the web because it gives the viewer a better idea of the images general appearance faster. PNG has an excellent interlacing scheme.


A method of interpreting image data to enhance JPEG compression by grouping and averaging color data over a block of pixel.


You can also try clicking Batch and specifying a range of palette sizes to create multiple tests. Then select the image you want from the history list.


For best results, the image you select for a transparency mask should have the same dimensions as the original.


Creating transparent images with feathered edges

You can create a feathered, (partially transparent) edge for your GIF images:

In PhotoImpact:

1.	Create a selection of the part of your image you wish to retain.

2.	Right click on the selection before loading the image into SmartSaver and choose Soften.

3.	In the Soften dialog box, specify the size of the soft edge.

4.	Click File: SmartSaver and select Mask from the Transparent area drop-down list.

5.	In the Adjust mask drop down list, choose how you would like to apply the mask.

Or

1.	Create an object of the part of your image you wish to retain.

2.	Right-click on the image and choose Properties.

3.	In the Object Properties dialog box, select Edge blending and specify the size for the soft edge.

4.	Click File: SmartSaver and select Mask from the Transparent area drop-down list.

5.	In the Adjust mask drop down list, choose how you would like to apply the mask.

Note: PhotoImpact 3.0 does not support loading the base image with a selection or object into dialog boxes.

In other Adobe PhotoShop Plug-in compatible programs

1.	Create a feathered selection according to that program's procedures.

2.	Load the image into the SmartSaver and select the appropriate channel.

3.	In the Adjust mask drop down list, choose how you would like to apply the mask.


Previewing transparent images with your web page backgrounds

If you are working with SmartSaver and wish to preview how your transparent image will look against the background you intend to use on you home page, you can include that background in your preview. Here's how:

1.	Click the Background tab and choose User Selected Background Image.

2.	Click Browse to select the file you wish to use as the background image.

Note: When you click Full Screen, the image you selected as a background will tile behind your optimized image. Use your mouse cursor or the arrow keys on your keyboard to adjust the position of the image against the selected background.


Ulead SmartSaver - Getting Started

When you click the SmartSaver icon, or from within PhotoImpact click Web: SmartSaver, the Ulead SmartSaver dialog box opens. Here you can select which file (or files) to optimize, and whether or not to preprocess the image or images before saving.

Open with Select GIF SmartSaver, JPEG SmartSaver or PNG SmartSaver. You can save files from any type of image format as GIF, JPEG or PNG. If your image is of photographic or photorealistic quality, then you should save them as JPEG or PNG as opposed to GIF because these file formats support millions of colors while GIF only supports 256.

Source Select to optimize either an entire folder of images (By folder) or to optimize files individually (By files). If you choose the By files option, then you can optimize either a single image file or multiple image files from different locations. If you have previously copied an image to the Windows clipboard, you can select From Clipboard (this is not available if the clipboard does not contain supported image data).

Pre-Processing Allows you to resize the image or images you've selected for optimization. This occurs before you actually begin setting your optimization options. You can adjust an image's width and height by number of pixels or by percent.

When you are finished selecting the options, click Start to run SmartSaver.


Setting GIF Options

The GIF Options tab allows you to define the image properties for the SmartSaved GIF file. These properties affect the appearance of the new GIF file.

Interlaced Select this option to set the interlacing attribute on the GIF file. An interlaced GIF file "fades-in" as it downloads, giving the viewer a preview of the final image before it has actually finished downloading.

Note: This slightly increases the overall size of the GIF file.

Palette Choose how you wish to optimize your colors automatically.

Colors You can directly determine the number of colors used in it. The number of shades greatly influences image size as well as quality, so you should experiment to achieve the best results. Try using the batch button to compare results.

Dither When an image has the number of shades of gray in its palette reduced, it uses a dithering algorithm to determine how this is done.

Smooth Always use smoothing when converting an Indexed Color image to PNG. True Color. Higher settings bring adjacent pixels closer together and usually produce better looking images.

Note: Avoid smoothing images with text.

After you've finished setting the options, click the Save as button to save the final image as a GIF file. Click Cancel to abort the SmartSave process and not save any of the specified settings. If you want to experiment with the image file and see how it will look according to a range of different specified settings, click the Batch button. This allows you to generate up to thirty different 'tests' using different settings for each one and a history list for you to call up and reuse the batch settings instantly. Finally, you can resize the image by clicking the Resample button or crop it by clicking the Crop button. Both of these allow you to quickly and efficiently resize the final image for use on the web (to further reduce bandwidth) or as a thumbnail of the original.


None

The default setting. No region within the file is designated 'transparent'.


Pick Colors

Allows you to pick the color or region you want to set as transparent. Press the Ctrl key while your mouse cursor is over the image in the preview window. It becomes a color picker which you can use to select the colors from the image. If you make a mistake or select too many colors, use the Undo/Redo buttons to rectify this. You can also restore the image to its original appearance by clicking the Reset button. Select the Adjacent color only option to create a transparent region based on the similarity of the pixels around the one you selected. A similarity setting of 0 selects only those adjacent pixels that have the same color value as the selected pixel. Higher similarity settings select pixels whose color values fall within the + or - X range of the selected pixel's color value, where X is the value entered in the Similarity spin box.


Import Mask

Allows you to create a transparent area based on an image mask or alpha channel. Select the Invert transparent area option to reverse the transparency. The Adjust mask drop down menu allows you to modify how the mask is applied to the image: None preserves the mask; Threshold allows you to specify the amount of blending between the mask and the original image (0 being maximum blending, 254 being no blending). To select the file you wish to use as a mask, click the Open button. Select Enable background blending to blending the mask more smoothly into the original image. Both Pattern and Diffusion also blend the mask into the original image, but with less accuracy than the Threshold option.


Background Options

The Background tab allows you to specify the "show-through" background color of your transparent image so that you can see how it will appear on your web page. In addition to setting a background color , you can also use an actual background image. This enables you to test the transparency in order to get an idea of how it might look when placed on your internet document. This is especially important for JPEG images.

White color sets the background color to white.

Black color sets the background color to black.

User selected color sets a custom background color. Click the color box to open the color picker.

User selected image sets an image file as the background. Click Browse to locate it. You can blend the non-transparent areas of the image with the most common color found in the image file by selecting the Blend with average color of selected image file option.

NOTE: JPEG transparency is accomplished in a slightly different manner.

After you've finished setting the options, click the Save As button to save the final image. If you want to experiment with the image file and see how it will look according to a range of different specified settings, click Batch. This allows you to generate up to thirty different 'tests' using different settings for each one and a history list for you to call up and reuse the batch settings instantly. Finally, you can resize the image by clicking Resample or remove unwanted portions by clicking Crop. Both of these allow you to quickly and efficiently resize the final image for use on the web (to further reduce bandwidth) or as a thumbnail of the original.


SmartSaver - Color Reduction (GIF or PNG)
SmartSaver - Color Reduction (GIF or PNG indexed)

The color options on the GIF or PNG options tab allow you to reduce the total number of colors in your graphic file. The maximum number of colors available in the GIF file format is 256, but some images require less. PNG files do not have this restriction. However, unless specified, the file's palette may contain more color than those actually found in the image, or in some cases, redundant colors. In order to reduce the file size and allow for faster downloads, you can easily reduce the number of colors.

Palette Sets the default color palette the file uses. Optimized uses only the colors found in the image itself, while Netscape and Microsoft uses 216 'web-safe' colors accepted by their respective web browsers. Palette file allows you to set a custom palette as the default.

Colors Sets the maximum number of colors in the file palette. It's best if the number you enter here corresponds directly with the number of colors the image actually contains to ensure best visual quality.

Smooth Blurs the image slightly to allow for better color blending. If your image contains text then you should set the Smooth option to 0.

Dither Compensates for colors 'missing' from the palette by blending existing colors from the palette to simulate them. When converting from a True Color image file such as JPEG or TIF you'll notice a significant loss in color and this option allows you to minimize the effects of this.

After you've finished setting the options, click Save As to save the final image as a GIF or PNG file. Click Cancel to abort the SmartSave process and not save any of the specified settings. If you want to experiment with the image file and see how it will look according to a range of different specified settings, click Batch. This allows you to generate up to thirty different 'tests' using different settings for each one and a history list for you to call up and reuse the batch settings instantly. Finally, you can resize the image by clicking Resample or remove unwanted portions by clicking the Crop button. Both of these allow you to quickly and efficiently resize the final image for use on the web (to further reduce bandwidth) or as a thumbnail of the original.


Palette Options - GIF or PNG indexed
Palette Options (GIF or PNG indexed)

The Palette tab displays all the colors available in the GIF or PNG file's current palette. You can get the color values for any given color by placing your mouse cursor over the color cell in question. To save the palette for use later, click Save. Palette files are saved with the *.pal file extension.

After you've finished setting the options, click Save as to save the final image. Click Cancel to abort the SmartSave process and not save any of the specified settings. If you want to experiment with the image file and see how it will look according to a range of different specified settings, click Batch. This allows you to generate up to thirty different 'tests' using different settings for each one and a history list for you to call up and reuse the batch settings instantly. Finally, you can resize the image by clicking Resample or remove unwanted portions by clicking the Crop button. Both of these allow you to quickly and efficiently resize the final image for use on the web (to further reduce bandwidth) or as a thumbnail of the original.


Setting JPG Options
Setting JPEG Options

Under 'Compression' you can define the compression settings used to create the new JPEG files. Compressing images, while reducing file sizes and making them easier to download, does have its drawbacks, primarily in that the more you compress an image the worse your final visual quality will become. Therefore, it's always good to try and maintain a balance between image quality and file size.

Smooth Blurs the image slightly to enhance compression. There are two reasons for doing this: Smoothing Indexed Color images reduces adverse affects due to dithering. If you are converting a GIF image to JPEG, you should always smooth the image first using the highest possible setting that allows you to retain the detail you desire. Images with large indistinct backgrounds, such as the sky or ocean can be smoothed to enhance compression. In general, the loss of detail due to smoothing will be minor compared to the added compression. Always use smoothing when converting an Indexed Color image to JPEG. Higher settings bring adjacent pixels closer together and usually produce better looking images.

Note: Avoid smoothing images with text.

Mode Select which type of JPEG image file to create: Progressive creates an image that gradually comes into focus as it opens. This creates a smaller file. However, some web browsers may not be able to display these images properly. Standard creates an image that will be compatible with all JPEG browsers. Images saved as standard JPEG tend to be larger than progressive images. Standard Optimized creates the smallest possible image using a non-progressive compression mode. Sometimes using this mode can create files smaller than those using progressive compression.

Best Compression/Best Quality Controls how much you want to compress the image. Lower settings produce smaller file sizes, but more original image information is distorted. Higher settings retain more original data, but result in larger file sizes. As a rule, start with a quality setting of 60 and never exceed a quality setting of 95. File size increases dramatically above this setting and the improvement in quality is rarely noticeable.

Subsampling Defines how accurately each pixel in the original image should be evaluated when optimizing: select 4-1-1 for the smallest possible file size.   (Default setting); select 4-2-2 for good accuracy and good compression; select None for the most accurate reproduction and larger file size. See the Subsampling topic in the SmartSaver Help for an explanation of subsampling. As a rule, images with no subsampling will be larger than their subsampled counterparts at the same quality levels. In general, you should be able to use lower quality settings when Subsampling is set to None.

After you've finished setting the options, click Save As to save the final image as a JPEG file. If you want to experiment with the image file and see how it will look according to a range of different specified settings, click Batch. This allows you to generate up to thirty different 'tests' using different settings for each one and a history list for you to call up and reuse the batch settings instantly. Finally, you can resize the image by clicking Resample or remove unwanted portions by clicking Crop. Both of these allow you to quickly and efficiently resize the final image for use on the web (to further reduce bandwidth) or as a thumbnail of the original.


What's New?

Version 3.0 of Ulead SmartSaver contains the following significant enhancements and additions:

Transparent JPEG You can use SmartSaver to match the background of your JPEG to the background of your Web page, effectively rendering it transparent.

Simplified User Interface The user interface has been unified and simplified. Whether you are working with GIF, JPEG or PNG, difficult transformations are a snap.

Powerful Conversion tools Conversion between file formats has never been easier. You can preview the results of the conversion and see the resulting file size in real time.

PNG support Full Progressive Network Graphics support and optimization.

Powerful edge blending control You can preview and optionally blend the input image (when alpha channel or mask is available) with different background selections such as the colors white and black, a custom selected color or even a custom selected image for producing smooth edges and drop shadow web graphics.

Enhanced batch file processing You can conveniently optimize static or animated GIF, PNG, and photorealistic JPEG images on a file by file basis, optimize by folder, or individually select multiple files, simply by using the new SmartSaver applet.

Pre-processing support Resample (up or down) or crop your input image to suitable dimensions to further control your image size.

New filters and compression There are many new algorithms being used in this version which ensure that your files are compressed to the max, without loosing visual quality.

Expanded file format support SmartSaver can now directly read 15 different image file formats, including: BMP, EPS, AIFF, IMG, GIF, JPEG, MAC, MSP, PCD, PCX, PICT, PNG, PSD, TGA and TIFF.


Selecting images to optimize

In the Select Files dialog box, you can add or remove files from the list of images to optimize. To use this dialog box:

1.	Locate the folder that contains the image file you want to optimize by clicking Browse. In the resulting dialog box, click the filename of the image files you want to include in optimizing and click Open. You can click with the Shift key to select a range of files or with the Ctrl key to select individual ones. The path for the selected files are entered into the list box.

2.	To add additional files, you can either click Browse and locate them, or enter the file's name and path in the entry line and click Add. Each time you select a file, its name and path are added to the Selected files list. When you've selected all the files you want to optimize, click OK to close the Select Files dialog box and return to the Ulead SmartSaver dialog box.

3.	To remove a file from the list, select it and click Remove. If you want to start all over again in the selection process, click Remove All to clear the Select files list.


Using the Open dialog box

You can select files from this dialog box to include them in the list of image files to optimize.

Selecting several files Click with the Shift key for selecting a range of files or the Ctrl key to select several individual ones.

Displaying file information Click a filename from the list box and information about that file is displayed in the File information section.

Opening options for some file formats Select the file format from the Files of type drop-down list to enable the Options button. Click Options to specify opening options.

To search in other location Click Browse to scan other drives and also list all matching files in the Files found list. You can also sort the files in the order that best suits your needs.


Compressing files by size

When optimizing a JPEG image, you can choose to compress the file by size in two ways:

Desired file size Select this option and enter a target file size. You can choose the units the file size is measured in as KB (kilobytes) or Bytes. The quality of your output will be heavily dependent on the size you choose.

Compression ratio Select this option and enter a percentage between 1 and 100 to compress the file. Lower compression ratios will give you greater compression. 100% will maintain current quality and will compress the quality the least.

note: You cannot use the Compression ratio if you have opened the image into SmartSaver via another application, or from the Windows clipboard. This is because original file size information is unavailible to the SmartSaver program in such situations.


Setting PNG options - True color
Setting PNG options
  True Color 	  Indexed	  Grayscale

Smooth Always use smoothing when converting an indexed color image to PNG True color. Higher settings bring adjacent pixels closer together and usually produce better looking images.

Note: Avoid smoothing images with text.

Filter You may be able to squeeze a few more bytes out of an image by applying a filter to it. Filters are mathematical algorithms which can improve an image's quality while reducing it's size. Use the batch button to compare the results of various filters.

Interlaced This produces an image which is progressively displayed over the Internet, with an initial low quality image being displayed almost immediately after the page loads.


Setting PNG options - Indexed
Setting PNG options
  True Color 	  Indexed	  Grayscale

Smooth Always use smoothing when converting an indexed color image to PNG True color. Higher settings bring adjacent pixels closer together and usually produce better looking images.

Note: Avoid smoothing images with text.

Palette This is an important factor in reducing the size of your PNG graphics. You can let SmartSaver optimize it for you, or select a custom palette to your image. MORE

Colors You can directly determine the number of colors used in your image. The number of colors greatly influences image size as well as quality, so you should experiment to achieve the best results. Try using the batch button to compare results.

Dither When an image has the number of colors in it's palette reduced, it uses available colors to simulate colors that may be lost in translation to the lower color format.

Filter You may be able to squeeze a few more bytes out of an image by applying a filter to it. Filters are mathematical algorithms which can improve an images quality while reducing it's size. Use the batch button to compare the results of various filters.

Interlaced This produces an image which is progressively displayed, with an initial low quality image being displayed almost immediately after the page loads.


Setting PNG options - Gray scale
Setting PNG options
  True Color 	  Indexed 	  Grayscale

Smooth Always use smoothing when converting an indexed color image to PNG. True color. Higher settings bring adjacent pixels closer together and usually produce better looking images.

Note: Avoid smoothing images with text.

Shades You can directly determine the number of shades of black and white used in it. The number of shades greatly influences image size as well as quality, so you should experiment to achieve the best results. Try using the batch button to compare results.

Dither When an image has the number of shades of gray in its palette reduced, it replaces lost shades with dithering.

Filter You may be able to squeeze a few more bytes out of an image by applying a filter to it. Filters are mathematical algorithms which can improve image quality while reducing file size. Use the batch button to compare the results of various filters.

Interlaced This produces an image which is progressively displayed, with an initial low quality image being displayed almost immediately after the page loads.


Transparency and JPG
Transparency and JPEG

SmartSaver can effectively render backgrounds on your JPEG transparent. It does this by carefully matching the areas you would like to make transparent with a background of your choice.

1.	Click the Background options tab in JPEG SmartSaver and select a background. You can select a color or an image file to test your JPEG against.

2.	Click the Mask options tab and select a transparent area: either pick colors or import a pre-existing mask.

3.	If you choose to pick the colors to make transparent, you can select these colors by holding down the Ctrl key and clicking an area with the mouse. You can unselect colors by holding down the Alt key and clicking on the image.

4.	Check the Adjacent color only check box and set the similarity of colors you would like to include in your selection. Higher values will cause more pixels to be selected, while a value of zero will insure that only identical colors will be selected.

5.	Watch the preview window to see which areas have been selected. When you achieve satisfactory results, click the Save button. SmartSaver blends the areas you have selected into the background of your choice to make transparent JPEG's.


Understanding PNG

Progressive Network Graphics, or PNG (pronounced "ping"), is a relatively new file format especially designed for the internet. As a lossless, true color, highly compressible format, it is in a position to become quite popular with the internet community. It is at this time, however, not widespread. It is comparable to the GIF file format in utility, but offers more features and is unencumbered by the legal problems that face GIF.

Features:

  lossless 	  gamma correction

  transparency	  true color

  well compressed	  error correction


Color in PNG

Color is a complex issue for any artist, but especially on the Web where bandwidth considerations are of critical importance. One of the biggest limitations to the GIF format is the fact that one can only use 256 colors in composing an image. In many cases, this is not a serious problem; 256 colors can be quite adequate for most tasks. PNG offers the user the ability to use true color (48bit) in images. Just because you have access to this many colors doesn't mean you should use them all in every picture. That's where PNG SmartSaver comes in. By optimizing your color palette, you can significantly reduce the size of your images without sacrificing quality.

  More on Palettes…


Batch processing

One of the most important features of SmartSaver is batch processing of a file. This will allow you to compare, side by side, various transformations as applied to a single file. The number of transformations can be selected by choosing the number of tests. What happens in each of those tests is slightly different depending on the type of file you are working with:

GIF The number of colors in a GIF image directly influences the file size and quality. You can choose the number of colors you want to test in your image (4-256). SmartSaver will then generate a number of tests within this range. The results will have the number of colors and corresponding file size of each test so you can easily pick the best balance.

JPEG The quality of a JPEG file can be set using SmartSaver. By using the Batch button, you can select the range of quality (0-100) to sample. A good range is from 60-95 since the size of a file increases rapidly above 95 percent with only limited improvements in visual quality.

PNG True color PNG images can have any number of filters applied to them to try and reduce file size. The Batch button will allow you to easily compare all of the various filters side by side. Indexed PNG have a color palette which may be reduced, very much like GIF images, and may be explored with the batch button in the same way. Grayscale images are also similar, except you choose the number of shades of gray your image contains instead of the number of colors.

See Also - Automating your image optimization


Mask options

Transparent Area - this allows you to define a transparent area within the boundaries of your file, allowing a web page's background to show through. This is especially useful for creating irregularly shaped images and buttons for your web pages. Although how you work with your image is the same for all three types of files, SmartSaver handles JPEG's in a slightly different manner, which is important to consider when applying transparency to this file type. The following options are available for the Transparent Area attributes:  None, [image] Pick Colors, [image] Import Mask


Mask Options - JPG
Mask options - JPEG

Transparent area Like GIF or PNG files, SmartSaver allows you to select the area you would like to make transparent, either by color (or colors) or by applying a mask to the image. The JPEG file format does not support transparency. Ulead SmartSaver gets around this limitation by applying your background to the areas you select in your JPEG file, making those areas effectively transparent when viewed against this background. Your JPEG will not appear to be transparent against any other backgrounds. Therefore, it is important to test your JPEG, using the Background options tab, before you save the file. When using solid colored or simple patterned images as backgrounds, the transparency will match almost perfectly. If you are using complex images for a background, especially ones with words, you will need to position your JPEG against this background as near to its final position on the web page as possible. Because of the wide variety of browsers, platforms, and screen resolutions, your page layout will not be consistent. It is therefore not recommended that you use transparent JPEG images against complex backgrounds.

The following options are available for the Transparent Area attributes:  None, [image] Pick Colors, [image] Import Mask


Background Options - JPG
Background options - JPEG

Background options become especially important when working with transparent JPEG images. It is important to test your image against its background because SmartSaver simulates transparency by superimposing your image over the selected background and thus creating an image with the same background. It does not make your image dynamically transparent in the same way as a GIF or PNG file is transparent. When creating transparent JPEG images with textured backgrounds, position may become more important.

 You should use the full screen viewing option (button on the toolbar) to see how the final output will look against the actual background. Move the JPEG around with the arrow keys to insure favorable results. This is especially important with complex backgrounds, such as those containing text or recognizable images.


Transparency

Many images on the internet have transparent or "see through" regions that allow the background of a page to show through. Transparency can be determined in SmartSaver by selecting an option from the Mask options tab. You can choose a mask you have already created, or select a color in your image by holding down the Ctrl key and clicking on a region in the uncompressed image. Multiple colors can be selected for transparency. You can test the results by letting go of the Ctrl key after your selection, at which time the compressed image will be updated. By working with the Background options tab, you can test how your image will look in a number of different situations.


Converting file formats

Converting between the various popular internet file formats (GIF, JPEG and PNG) is simple  with SmartSaver. Open the file you want to convert in SmartSaver. In the left panel, your original file will be displayed and in the right panel, the file as modified by SmartSaver. This modification can even be to an entirely new format.

Click one of the [image] buttons on the right to change to the new file format, say GIF. Now the image on the left is your uncompressed original JPEG and the image on the right is the same file as a GIF. You can also compare the file sizes at a glance and easily preview how this conversion will affect your file.

It is not really a good idea to convert GIF images to JPEG, particularly if the image is heavily dithered. The JPEG compression scheme sees dithering as noise and treats each pixel uniquely. In almost every case, the resulting JPEG comes out looking worse than the original GIF. One possible exception to this is converting a Grayscale GIF. That is because grayscale, like JPEG compression, is primarily based upon changes of brightness and contrast, not actual colors.

If you feel that you absolutely must convert, here are some guidelines to follow:

Many times when the image is already smaller than 100 KB, the space savings will usually not be significant.

Trim away any border around the image. The border can significantly add to the file size. Also, keeping the border may produce "ghost" images in the converted image. And due to the concentration of colored pixels making up the border, the compressor may give it higher importance than other, more significant parts of the image.

Set the Smooth option as high as possible to bring the dithered pixels closer to each other in value and make the compression easier. It will also give you a smaller file.

Use a higher quality setting than you would for an image that was always a true color image.

Stick with 4-1-1 subsampling.

Remember that an indexed color image rarely compresses as well as an original true color image.


Lossless

PNG is a lossless format, which simply means that information is not lost when the file is compressed. JPEG is a lossy format which sacrifices some image information in compression.


Transparency

Transparency means that some parts of an image can be "see through" which allows a background to show through.


Compression

Using mathematical algorithms, a file's size can be significantly reduced. PNG is very well compressed, many times by a factor of eight.


Gamma correction

PNG provides automatic correction of brightness levels in an image to compensate for variation in computer monitors and video hardware.


True Color

PNG provides 48bit, true color file formatting (which theoretically means 280 trillion colors - far more than a human could possibly detect). This is a significant improvement over GIF 256 colors.


Error correction

PNG is a very robust format because it can automatically detect errors in transmission and file corruption.